<template>
  <div class="toolpanel">
    <ul class="box">
      <li><img src="../../../static/IMG/icon/north.png" @click="north1"  alt=""/></li>
      <li><img src="../../../static/IMG/icon/zoomin.png" @click="zoomIn1" alt="" /></li>
      <li><img src="../../../static/IMG/icon/zoomout.png" @click="zoomOut1" alt="" /></li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: "Navigation",
    components:{
    },
    methods:{
     /* north1:function(){
        sgworld.Navigate.setView();
      },*/
      zoomIn1:function(){
        sgworld.Navigate.zoomIn();
      },
      zoomOut1:function () {
        sgworld.Navigate.zoomOut();
      }
    }
  }
</script>

<style scoped>
  ul{ padding:0; margin:0; overflow:hidden;width: 34px;height: 150px}
  li{ list-style:none;padding-left: 6px;}
  img{ border:0; cursor: pointer;width:43px; height:43px; position:relative;left:-3px;transition: all 0.6s;}
  ul{ width:50px;height: 150px;border: 1px solid #00bcd4;background-color: rgba(0,172,206,0.5);border-radius: 5px;display: table-cell;vertical-align: middle;text-align: center;margin-right: 10px;}
  ul li{ margin-top:10px;}

  .toolpanel{
    position: fixed;
    right: 15px;
    top:320px;
    border: none;
    z-index: 96;
  }

  .toolpanel .box li:hover img{filter:alpha(Opacity=80);-moz-opacity:0.8;opacity: 0.8;transform: scale(1.2);}


</style>
